<template>
  <div class="item-detail">
    <vxe-table
      border
      stripe
      size="small"
      :loading="loading"
      :data="tableData"
      header-align="center"
      align="center"
      highlight-hover-row
      :show-summary="true"
      :summary-config="summaryConfig"
    >
      <vxe-column type="seq" title="序号" width="50"></vxe-column>
      <vxe-column field="itemType" title="追加" width="60"></vxe-column>
      <vxe-column field="itemCode" title="商品" width="80" show-overflow></vxe-column>
      <vxe-column field="packageType" title="包装" width="60" show-overflow></vxe-column>
      <vxe-column field="platformItemName" title="平台商品名称和商品规格" min-width="200" show-overflow>
        <template #default="{ row }">
          <div>{{ row.platformItemName }}</div>
          <div v-if="row.platformSpecName" style="color: #999; font-size: 12px;">{{ row.platformSpecName }}</div>
        </template>
      </vxe-column>
      <vxe-column field="originalCode" title="原始商品编码" width="120" show-overflow></vxe-column>
      <vxe-column field="itemSkuCode" title="规格代码" width="100" show-overflow></vxe-column>
      <vxe-column field="itemSkuName" title="规格名称" width="100" show-overflow></vxe-column>
      <vxe-column field="quantity" title="数量" width="70"></vxe-column>
      <vxe-column field="discount" title="折扣" width="70">
        <template #default="{ row }">
          {{ row.discount ? row.discount + '%' : '' }}
        </template>
      </vxe-column>
      <vxe-column field="standardPrice" title="标准单价" width="90">
        <template #default="{ row }">
          {{ row.standardPrice ? '￥' + row.standardPrice.toFixed(2) : '' }}
        </template>
      </vxe-column>
      <vxe-column field="standardAmount" title="标准金额" width="90">
        <template #default="{ row }">
          {{ row.standardAmount ? '￥' + row.standardAmount.toFixed(2) : '' }}
        </template>
      </vxe-column>
      <vxe-column field="actualPrice" title="实际单价" width="90">
        <template #default="{ row }">
          {{ row.actualPrice ? '￥' + row.actualPrice.toFixed(2) : '' }}
        </template>
      </vxe-column>
      <vxe-column field="platformDiscountAmount" title="平台折扣金额" width="110">
        <template #default="{ row }">
          {{ row.platformDiscountAmount ? '￥' + row.platformDiscountAmount.toFixed(2) : '' }}
        </template>
      </vxe-column>
      <vxe-column field="discountAmount" title="让利金额" width="90">
        <template #default="{ row }">
          {{ row.discountAmount ? '￥' + row.discountAmount.toFixed(2) : '' }}
        </template>
      </vxe-column>
      <vxe-column field="finalAmount" title="让利后金额" width="90">
        <template #default="{ row }">
          {{ row.finalAmount ? '￥' + row.finalAmount.toFixed(2) : '' }}
        </template>
      </vxe-column>
      <vxe-column field="orderCode" title="单据编号" width="120" show-overflow></vxe-column>
      <vxe-column field="platformOrderCode" title="平台号" width="180" show-overflow></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  name: 'ItemDetail',
  props: {
    deliveryOrderId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      loading: false,
      tableData: [],
      summaryConfig: {
        showSummary: true,
        summaryMethod: this.summaryMethod
      }
    }
  },
  watch: {
    deliveryOrderId: {
      handler(val) {
        if (val) {
          this.getDetail();
        }
      },
      immediate: true
    }
  },
  methods: {
    getDetail() {
      this.loading = true;
      // TODO: 调用获取商品明细接口
      // getDeliveryItemDetail(this.deliveryOrderId).then(res => {
      //   this.tableData = res.data;
      // }).finally(() => {
      //   this.loading = false;
      // })
      
      // 模拟数据
      setTimeout(() => {
        this.tableData = [{
          itemType: '追加',
          itemCode: '2501000',
          packageType: '包',
          platformItemName: 'JX-BIRD特为读马洞CYBER专用',
          platformSpecName: '洞鸟马代创意包 8[92773347218]',
          originalCode: '25010008',
          itemSkuCode: '558139056236',
          itemSkuName: '杰特兔包',
          quantity: 1.0,
          discount: 100,
          standardPrice: 89.00,
          standardAmount: 89.00,
          actualPrice: 89.00,
          platformDiscountAmount: 0.00,
          discountAmount: 0.00,
          finalAmount: 4880.00,
          orderCode: 'SO2604091521960',
          platformOrderCode: '405490914022627'
        }];
        this.loading = false;
      }, 500);
    },
    
    // 合计行计算方法
    summaryMethod({ columns, data }) {
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        
        const values = data.map(item => Number(item[column.field]));
        const summaryFields = ['quantity', 'standardAmount', 'platformDiscountAmount', 'discountAmount', 'finalAmount'];
        
        if (summaryFields.includes(column.field)) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          
          if (column.field !== 'quantity') {
            sums[index] = '￥' + sums[index].toFixed(2);
          }
        } else {
          sums[index] = '';
        }
      });
      
      return sums;
    }
  }
}
</script>

<style lang="scss" scoped>
.item-detail {
  padding: 20px;
}
</style>
